<template>
  <div>
    <van-nav-bar title="地图找房" left-arrow @click-left="$router.back()" fixed />
    <baidu-map class="bm-view" ak="YOUR_APP_KEY" :zoom="num" :center="address">
      <MyOverlay
        :item="item"
        :stat="stat"
        v-for="(item, index) in houseList"
        :key="item.value"
        :index="index"
        @randerMap="randerMap(item)"
        @productShowFn="productShowFn"
      >
      </MyOverlay>
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-scale>
    </baidu-map>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '45%' }"
      :overlay="false"
    >
      <!-- <van-card
        :price="item.price"
        :desc="item.desc"
        :title="item.title"
        :thumb="`http://liufusong.top:8080${item.houseImg}`"
        v-for="item in house"
        :key="item.houseCode"
      /> -->
      <div class="title_box">
        <h1 class="title">房屋列表</h1>
        <a class="more">更多房源</a>
      </div>
      <HouseCard :housList="house"></HouseCard>
    </van-popup>
  </div>
</template>

<script>
import { houseMapApi, allHousesApi } from '@/api'
import MyOverlay from './MyOverlay.vue'
import { Toast } from 'vant'
import HouseCard from '../../views/List/houseCard.vue'
export default {
  components: {
    MyOverlay,
    HouseCard
  },
  methods: {
    // 请求函数
    async houseMapFn (data) {
      Toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      const res = await houseMapApi({ id: data.value })
      Toast.clear()
      return res
    },
    moveMapFn () {
      console.log(1)
      // this.show = false
    },
    async randerMap (data) {
      this.stat++
      this.address = data.label
      if (this.stat === 2) {
        this.num = 13
      } else if (this.stat === 3) {
        this.num = 16
      } else {
        console.log(1)
      }
      // 请求
      const res = await this.houseMapFn(data)
      this.houseList = res.data.body
      this.address = {
        lng: this.houseList[0].coord.longitude,
        lat: this.houseList[0].coord.latitude
      }
    },
    async productShowFn (val) {
      Toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true
      })
      // 房屋请求
      const res = await allHousesApi({ cityId: val.value })
      this.show = true
      this.house = res.data.body.list
      Toast.clear()
    }
  },
  async created () {
    const data = JSON.parse(localStorage.getItem('hkzf_city') || localStorage.getItem('sel_city'))
    console.log(data)
    this.address = data.label
    // 请求
    const res = await this.houseMapFn(data)
    this.houseList = res.data.body
    console.log(this.houseList)
  },
  data () {
    return {
      address: '',
      houseList: '',
      num: 11,
      stat: 1,
      show: false,
      house: []
    }
  }
}
</script>

<style lang="less" scoped>
.bm-view {
  width: 100%;

  // height: 300px;
  //高度满屏
  height: 100vh;
  // height: 622px;
  // position: absolute
}
/deep/.BMap_mask {
  margin-top: 44px;
}
.title_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  width: 100%;
  background: #c0c0c2;
  border-top: 1px solid #c8c8c8;
  padding:0 10px;
  .title{
    display: inline-block;
    font-size: 16px;
    }
    .more{
      font-size: 13px;
    }
}
// body {
//   // padding-bottom: 10px;
// }
</style>
